<template>
	<view class="character">
		<view class="line"></view>

		<view class="roleImgBox">
			<image v-if="role==1 || role==null" src="https://mp.blrwworkshop.com/imgs/student.png" mode=""></image>
			<image v-else src="https://mp.blrwworkshop.com/imgs/Parent.png" mode=""></image>
		</view>

		<view class="title_tip">
			请您选择角色
		</view>


		<view class="btns_dark" :class="{btns_student : role==1}" @click="handleSelectCharacter(1)">
			学生
		</view>

		<view class="btns_dark" :class="{btns_parent : role==2}" @click="handleSelectCharacter(2)">
			家长
		</view>

	</view>
</template>

<script>
	import {
		editLoginType
	} from "../../api/api.js"
	export default {
		data() {
			return {
				role: null, //1学生 2家长
			}
		},
		onLoad() {

		},
		methods: {
			handleSelectCharacter(value) {
				this.role = value
				uni.setStorageSync('role', this.role)
				this.handleeditLoginType()
			},
			async handleeditLoginType() {
				let res = await editLoginType({
					userType: this.role
				})
				if (res.code == 200) {
					uni.showLoading({
						title: "正在进入",
						mask: true
					});
					setTimeout(() => {
						uni.hideLoading()
						uni.switchTab({
							url: "/pages/tabbar/home/home"
						})
					}, 1500)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.character {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.line {
			width: 100%;
			height: 1rpx;
			background: rgba(0, 0, 0, 0.1);
		}

		.roleImgBox {
			margin-top: 36rpx;

			image {
				width: 580rpx;
				height: 580rpx;
			}
		}

		.title_tip {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
			margin-top: 52rpx;
			margin-bottom: 46rpx;
		}

		.btns_dark {
			width: 486rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			border: 2rpx solid #F0F0F0;
			font-weight: 400;
			font-size: 32rpx;
			color: #DCDCDC;
			line-height: 80rpx;
			text-align: center;
			margin-bottom: 32rpx;
		}

		.btns_student {
			background: #FFA116;
			color: #FFFFFF;
		}

		.btns_parent {
			background: #41C76F;
			color: #FFFFFF;
		}

	}
</style>